<script setup lang="ts">
import { kxDropdown, kxDropdownMenu, kxDropdownItem, kxDropdownTrigger } from './components/kx-dropdown'

</script>

<template>
  <div class="grid grid-cols-2 pt-10">


    <div class="grid place-content-center">
      <kx-dropdown class="text-white">
        <kx-dropdown-trigger>
          <button class="px-4 py-3 bg-gray-500 rounded-md ">hello</button>
        </kx-dropdown-trigger>

        <kx-dropdown-menu class="bg-black cursor-pointer">
          <kx-dropdown-item>hello-1</kx-dropdown-item>
          <kx-dropdown-item>hello-2</kx-dropdown-item>
          <kx-dropdown-item>hello-3</kx-dropdown-item>
        </kx-dropdown-menu>
      </kx-dropdown>

    </div>

    <div class="grid place-content-center">

      <kx-dropdown class="text-white">
        <kx-dropdown-trigger>
          <button class="px-4 py-3 bg-gray-500 rounded-md text-white">world</button>
        </kx-dropdown-trigger>

        <kx-dropdown-menu class="bg-black cursor-pointer">
          <kx-dropdown-item>world-1</kx-dropdown-item>
          <kx-dropdown-item>world-2</kx-dropdown-item>
          <kx-dropdown-item>world-3</kx-dropdown-item>
        </kx-dropdown-menu>
      </kx-dropdown>

    </div>

  </div>
</template>

<style scoped></style>
